<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-08 08:59:14
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-08-11 09:21:34
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\MainBanner.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, onMounted, nextTick, computed, watch } from 'vue'
import { getCarouselVoTranslateListByLang } from '@/api/xyybackend/getVoList'
import { useLangStore } from '@/stores/langStore'
// 在组件挂载后重新初始化 WOW.js 动画
onMounted(async () => {
  if ((window as any).WOW) {
    new (window as any).WOW().init()
  }
  await Promise.all([getSlidersFromBackend(), nextTick()])

  // 等待DOM更新完成
  if (window.jQuery && window.$('.main-banner').length) {
    window.$('.main-banner').slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      dots: false,
      autoplay: true,
      autoplaySpeed: 7000,
      speed: 500,
      cssEase: 'linear',
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            dots: true,
            slidesToShow: 1,
          },
        },
      ],
    })
  }
})

const langStore = useLangStore()
var slides = ref<SlideItem[]>()
const getSlidersFromBackend = async () => {
  const { currentLang } = langStore //全局语言获取
  const response = await getCarouselVoTranslateListByLang({ lang: currentLang })
  slides.value = response.rows

  slides.value = processedSlides.value
}
// 监听语言变化，立即发请求
watch(
  () => langStore.currentLang, // 监听的目标
  async (newLang) => {
    // console.log('检测到语言变化:', newLang)
    await getSlidersFromBackend() // 执行请求
  },
  { immediate: true } // 是否在初始化时立即执行一次
)
interface SlideItem {
  id: number
  imageUrl: string
  title: string
  content: string
  delay: string
  animation: string
}
const getLocalizedSlide = (slide, lang) => ({
  ...slide,
  title: lang === 'zh' ? slide.title : slide.titleTranslate,
  content: lang === 'zh' ? slide.content : slide.contentTranslate,
})
const defaultDelay = '1s' // 默认延迟时间
const defaultAnimation = 'fadeInLeft' // 默认动画效
const processedSlides = computed(() => {
  return slides.value.map((slide) =>
    getLocalizedSlide(
      {
        ...slide,
        delay: slide.delay || defaultDelay,
        animation: slide.animation || defaultAnimation,
      },
      langStore.currentLang
    )
  )
})
</script>

<template>
  <div class="slider p-relative">
    <div class="main-banner arrow-layout-1">
      <div v-for="slide in slides" :key="slide.id" class="slide-item">
        <template v-if="slide.imageUrl">
          <img :src="slide.imageUrl" class="image-fit" alt="Slider" />
          <div class="transform-center">
            <div class="container" >
              <div class="row">
                <div
                  class="col-lg-12 wow fadeInLeft"
                  :data-wow-delay="slide.delay"
                >
                  <div class="slider-content">
                    <h1 class="text-custom-white">
                      {{ slide.title }}
                    </h1>
                    <p class="text-custom-white">
                      {{ slide.content }}
                    </p>
                    <a href="#" class="btn-first btn-small">{{
                      langStore.tipsButton
                    }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
